<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>客户端分段专题图</title>
    <!--导入外部样式表-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <!--必要的脚本引用-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <style>
        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 16px;
            color: inherit;
        }

        .text-center {
            text-align: center;
        }

        .panel-heading {
            padding: 5px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            background-color: rgb(205, 255, 229);
            border-color: #337ab7;
        }

        .panel-body {
            padding: 10px;
            background-color: #f0ffff;
        }
    </style>

    <script type="text/javascript">
        //使用严格模式
        "use strict";
        //定义地图文档图层和地图、专题图图层
        var mapDocLayer, map, themeSource, themeLayer;
        var {
            protocol,
            ip,
            port
        } = window.webclient;
        var ip = `${ip}`;
        var port = `${port}`;
        var docName = 'Hubei4326';

        /** 初始化地图显示*/
        function init() {
            var center = [(108.34341 + 116.150939561213) / 2, (29.0125822276524 + 33.2932017737021) / 2];
            var extent = [-180, -90, 180, 90];

            //投影坐标系
            var projection = new ol.proj.Projection({
                units: 'degrees',
                extent: extent
            });
            map = new ol.Map({
                target: 'ol_map',
                //地图容器中要加载的图层列表
                view: new ol.View({
                    center: center,
                    projection: projection,
                    zoom: 7
                })
            });
            //地图的显示名称
            var name = "MapGIS IGS MapDocLayer";
            mapDocLayer = new Zondy.Map.MapDocTileLayer(name, docName, {
                //IP地址
                ip: ip,
                //端口号
                port: port
            });
            map.addLayer(mapDocLayer);
        }

        /** 添加专题图*/
        function createThemeBtn() {
            startPressBar();
            // 定义 Unique 单值专题图层
            var options = {
                isHoverAble: true
            };
            options.map = map;

            // 图层基础样式
            options.style = new Zondy.Map.ThemeStyle({
                shadowBlur: 3,
                shadowColor: "#000000",               
                fillColor: "#FFFFFF"
            });

            // hover 高亮样式
            options.highlightStyle = new Zondy.Map.ThemeStyle({
                stroke: true,
                strokeWidth: 4,
                strokeColor: 'blue',
                fillColor: "#00EEEE",
                fillOpacity: 0.8
            });

            // 用于专题图的属性字段名称
            options.themeField = "GDP2016";
            // 风格数组，设定值对应的样式
            options.styleGroups = [{
                start: 0,
                end: 100,
                style: {
                    fillColor: "#ccffff"
                }
            }, {
                start: 100,
                end: 150,
                style: {
                    fillColor: "#66ffff"
                }
            }, {
                start: 150,
                end: 200,
                style: {
                    fillColor: "#33ffcc"
                }
            }, {
                start: 200,
                end: 400,
                style: {
                    fillColor: "#66ff99"
                }
            }, {
                start: 400,
                end: 1323,
                style: {
                    fillColor: "#00ccff"
                }
            }];


            themeSource = new Zondy.Source.RangeThemeSource("ThemeLayer", options);
            addThemeFeatures(uniqueQuerySuccess);
            //专题图层 mousemove 事件
            themeSource.on('mousemove', highLightLayer);

            var pointerInteraction = new ol.interaction.Pointer({
                handleMoveEvent: function (event) {
                    themeSource.fire('mousemove', event);
                }
            });
            map.addInteraction(pointerInteraction);
            themeLayer = new ol.layer.Image({
                source: themeSource
            });
            themeLayer.setOpacity(0.8);
            map.addLayer(themeLayer);
        }

        /** 添加专题图要素*/
        function addThemeFeatures(onsuccess) {
            var queryStruct = new Zondy.Service.QueryFeatureStruct();
            //是否包含几何图形信息
            queryStruct.IncludeGeometry = true;
            //是否包含属性信息
            queryStruct.IncludeAttribute = true;
            //是否包含图形显示参数
            queryStruct.IncludeWebGraphic = false;
            //实例化查询参数对象
            var queryParam = new Zondy.Service.QueryParameter({
                resultFormat: "json",
                struct: queryStruct,
                where: '1>0'
            });
            //设置查询分页号
            queryParam.pageIndex = 0;
            //设置查询要素数目
            queryParam.recordNumber = 10000;
            //实例化地图文档查询服务对象
            var queryService = new Zondy.Service.QueryDocFeature(queryParam, docName, 1, {
                ip: ip,
                port: port,
                requestType: 'POST'
            });

            //执行查询操作，querySuccess为查询回调函数
            queryService.query(onsuccess, null);
        }

        /** 要素查询成功回调函数*/
        function uniqueQuerySuccess(data) {
            if (data != null) {
                //客户端专题图：添加数据
                //themeLayer.addFeatures(data);
                themeSource.addFeatures(data);
                document.getElementById("legendview").style.display = "block";
            }
            stopPressBar();
        }

        /** 高亮设置*/
        function highLightLayer(e) {
            if (e.target && e.target.refDataID) {
                document.getElementById("infoBox").style.display = "block";
                var fid = e.target.refDataID;
                var fea = themeLayer.getSource().getFeatureById(fid);
                if (fea) {
                    document.getElementById("infoContent").innerHTML = "";
                    document.getElementById("infoContent").innerHTML += "FID: " + fea.attributes.FID + "<br/>";
                    document.getElementById("infoContent").innerHTML += '行政区: ' +
                        fea.attributes['NAME'] + "<br/>";
                    document.getElementById("infoContent").innerHTML += 'GDP2016：' +
                        parseInt(fea.attributes['GDP2016']) + "<br/>";
                }
            } else {
                document.getElementById("infoContent").innerHTML = "";
                document.getElementById("infoBox").style.display = "none";
            }
        }

        /** 删除专题图*/
        function deleteTheme() {
            if (map != null && themeLayer != null) {
                themeLayer.getSource().un('mousemove', highLightLayer);
                map.removeLayer(themeLayer);
                document.getElementById("legendview").style.display = "none";
                document.getElementById("infoBox").style.display = "none";

            }
        }

        /** 开始进度条动画*/
        function startPressBar() {
            document.getElementById('mapCon').style.display = "";
        }

        /** 停止进度条动画*/
        function stopPressBar() {
            document.getElementById('mapCon').style.display = "none";
        }
    </script>
</head>

<body onload="init();">
    <div id="mapCon" style="position: absolute;width: 100%; height:95%;">

    </div>
    <div id="menuContain" class='menuContain'>
        <div id="tool-container">
            <div id='dataSourceMenuID' class="optmain" status="unactive" onclick="switchMenuStatus(this,'menu1')">
                <span></span><i class="menuGroup">专题图</i><em></em>
            </div>
        </div>
    </div>
    <div id="menu1" class="menuStrip" style='display:none; z-index:999'>
        <ul class="menuItems">
            <li onclick="createThemeBtn()"><span class="item1"></span><i>创建</i>
            </li>
            <li class="divider"></li>
            <li onclick="deleteTheme()"><span class="item3"></span><i>删除</i>
            </li>
        </ul>
    </div>
    <div id="ol_map" style="width:100%;height:100%;position:absolute;top:0px;">

    </div>

    <div id="infoBox" class="panel panel-primary infoPane"
        style="width:170px;right: 10px;bottom: 230px;position: absolute;fontSize:14px;display: none;">
        <div class="panel-heading">
            <h5 class='panel-title text-center'>属性</h5>
        </div>
        <div id="infoContent" class="panel-body content">
        </div>
    </div>
    <div id='legendview' class="panel panel-primary legend"
        style="width: 170px;right: 10px;bottom:0px;position: absolute;display: none;">
        <div class="panel-heading">
            <h5 class="panel-title text-center">图例</h5>
        </div>
        <div class="panel-body text-center">
            <table>
                <tbody>
                    <tr>
                        <td class="legendItemHeader">GDP2016</td>
                        <td class="legendItemValue">颜色</td>
                    </tr>
                    <tr>
                        <td class='legendItemHeader'>0 - 100</td>
                        <td class='legendItemValue' style='background: #ccffff'></td>
                    </tr>
                    <tr>
                        <td class="legendItemHeader">100 - 150</td>
                        <td class="legendItemValue" style="background: #66ffff"></td>
                    </tr>
                    <tr>
                        <td class="legendItemHeader">150 - 200</td>
                        <td class="legendItemValue" style="background: #33ffcc"></td>
                    </tr>
                    <tr>
                        <td class="legendItemHeader">200 - 400</td>
                        <td class="legendItemValue" style="background: #66ff99"></td>
                    </tr>
                    <tr>
                        <td class="legendItemHeader">400 - 以上</td>
                        <td class="legendItemValue" style="background: #00ccff"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <script>
        function switchMenuStatus(div, menuitemFrameID) {
            var temDivs = document.getElementsByClassName('optmain');
            if (temDivs.length > 0) {
                for (var i = 0; i < temDivs.length; i++) {
                    if (temDivs[i] === div) {
                        var status = div.getAttribute("status");
                        if (status == "unactive") {
                            div.setAttribute("status", "active");
                            var tem_spans = div.getElementsByTagName("span");
                            var tem_ems = div.getElementsByTagName("em");
                            tem_spans[0].className = "active";
                            tem_ems[0].className = "active";

                            //显示菜单项
                            DisplayMenuItem(true, menuitemFrameID);

                        } else {
                            div.setAttribute("status", "unactive");
                            var tem_spans = div.getElementsByTagName("span");
                            var tem_ems = div.getElementsByTagName("em");
                            tem_spans[0].className = "";
                            tem_ems[0].className = "";

                            //隐藏菜单项
                            DisplayMenuItem(false, menuitemFrameID);
                        }
                    } else {
                        var status = temDivs[i].getAttribute("status");
                        if (status == "active") {
                            temDivs[i].setAttribute("status", "unactive");
                            var tem_spans = temDivs[i].getElementsByTagName("span");
                            var tem_ems = temDivs[i].getElementsByTagName("em");
                            tem_spans[0].className = "";
                            tem_ems[0].className = "";
                        }
                    }
                }
            }
        }

        function DisplayMenuItem(isDisplay, iframeID) {
            var menuItemFrame = document.getElementById(iframeID);
            if (menuItemFrame != null) {
                if (isDisplay) {
                    var temDivs = document.getElementsByClassName('menuStrip');
                    if (temDivs.length > 0) {
                        for (var i = 0; i < temDivs.length; i++) {
                            if (temDivs[i] != menuItemFrame) {
                                temDivs[i].style.display = "none";
                            }
                        }
                    }
                    menuItemFrame.style.display = "";
                } else {
                    menuItemFrame.style.display = "none";
                }
            }
        };
    </script>
</body>

</html>